Skip to content

Add consistent header component across all pages - #4

Draft
CarwilB with Copilot wants to merge 3 commits into
mainfrom
copilot/add-consistent-header-layout
Draft

Add consistent header component across all pages#4
CarwilB with Copilot wants to merge 3 commits into
mainfrom
copilot/add-consistent-header-layout

Conversation

Copilot AI commented Jan 10, 2026 •
edited
Loading

Copy link
Copy Markdown

All pages now share a unified header with navigation and branding, replacing the inconsistent navigation patterns across homepage (sidebar-only), recent/popular pages (minimal header), and tweet pages.

Implementation

New header component (_includes/header.11ty.js)

  • Auto-highlights active page via aria-current="page"
  • Semantic HTML5 with proper ARIA labels
  • Navigation: Home | Recent | Popular | External Link

Layout integration (_includes/layout.11ty.js)

const header = require("./header.11ty.js");
const headerHtml = header.call(this, data);

// Wrapped both layout variants with consistent structure
<body>
  ${headerHtml}
  <div class="page-container">
    <!-- sidebar or single-column content -->
  </div>
</body>

Responsive styling (assets/style.css)

  • Sticky header on desktop (>768px)
  • Flexbox navigation with mobile adaptation
  • Active page highlight (green background)
  • Body layout changed from flex-direction: row to column to accommodate header

Visual Changes

Homepage - Header added above sidebar layout:
Homepage

Recent/Popular Pages - Replaced minimal header:
Recent Page

Tweet Pages - Consistent navigation across all tweets:
Tweet Page

Documentation

Added docs/header-component.md with customization guide for navigation items, styling, and accessibility features.

Note: Removed pagefind from package.json as it was failing installation and is disabled in the config.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • https://api.github.com/repos/CloudCannon/pagefind/releases/tags/v0.10.7
    • Triggering command: /usr/local/bin/node node ./lib/postinstall.js (http block)
  • pbs.twimg.com
    • Triggering command: /usr/local/bin/node node /home/REDACTED/work/tweetback/tweetback/node_modules/.bin/eleventy --quiet (dns block)
    • Triggering command: /usr/local/bin/node node /home/REDACTED/work/tweetback/tweetback/node_modules/.bin/eleventy --quiet --serve (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Original prompt

Implement a consistent header across all pages of the application to improve navigation and brand identity. Tasks included designing a unified header layout, refactoring existing pages, ensuring accessibility, and documenting header usage for contributors.

This pull request was created from Copilot chat.

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

@CarwilB

CarwilB commented Jan 10, 2026

Copy link
Copy Markdown
Owner

Implement a consistent header across all pages of the application to improve navigation and brand identity.

Tasks:

  • Design a unified header layout that includes navigational elements, logo, and key action buttons (e.g., login, sign up, profile, help).
  • Refactor existing pages to remove redundant or disjointed headers and replace them with the new standard header component.
  • Ensure accessibility best practices: keyboard navigation, appropriate ARIA roles, and contrast levels.
  • Document header usage for future contributors.

Acceptance Criteria:

  • All pages display the new header consistently.
  • Header works across modern browsers.
  • No UI or functional regressions on page reload or routing.

Copilot AI and others added 2 commits January 10, 2026 13:32
@CarwilB
Initial plan for consistent header implementation
a49ddb0 
Co-authored-by: CarwilB <54286746+CarwilB@users.noreply.github.com>
@CarwilB
Implement consistent header across all pages with navigation and acce…
98e096a 
…ssibility

Co-authored-by: CarwilB <54286746+CarwilB@users.noreply.github.com>
Copilot AI changed the title [WIP] Add consistent header across all application pages Add consistent header component across all pages Jan 10, 2026
Copilot AI requested a review from CarwilB January 10, 2026 13:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@CarwilB CarwilB Awaiting requested review from CarwilB

Assignees

@CarwilB CarwilB

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@CarwilB